.aSpacer
    width 1rem
    height @width
    &.small
        width 0.5rem
        height @width

.aDimmer
    position fixed
    background-color rgba(0, 0, 0, 0.3)
    if (themeDark)
        background-color rgba(0, 0, 0, 0.65)
    left 0
    right 0
    top 0
    bottom 0
    width 100%
    height 100%
    z-index 20
    display flex
    flex-flow column nowrap
    align-items center
    justify-content center
    &-aCloseButton
        position absolute
        right 1rem
        top 1rem
        @extends button.square
        @extends button.inline
        @extends button.square.inline
        margin 0

.aModal, .aPanel
    box-sizing border-box
    background background
    border 1px solid borderBright
    border-radius br
    position relative
    &.success
        border-color success
        background mix(background, success, 90%)
    &.warning
        border-color warning
        background mix(background, warning, 90%)
    &.error
        border-color error
        background mix(background, error, 90%)

.aModal
    max-height 90%
    overflow auto
    box-shadow 0 2px 5px rgba(shadows, 0.35)

.aView
    overflow auto
    background backgroundDeeper
    position absolute
    left 0
    right 0
    top 0
    bottom 0
    border-top 0
    .aView
        border 0

.inset
    background backgroundDeeper
    padding 1rem
    margin 0 -1rem
    border-top 1px solid borderPale

.aStripedList
    margin 0.5rem 0
    padding 0
    li
        list-style none
        padding 0.2em 0.8em
        margin 0
        border-bottom 1px solid borderPale
        &:last-child
            border-bottom 0


// Меню выбора - список
.aMenu
    @extends .aStripedList
    overflow auto
    font-weight 400
    & + &
        margin-top 1rem
    li
        cursor pointer
        overflow hidden
        text-overflow ellipsis
        white-space nowrap
        {trans}
        &.flexrow
            align-items center
        &:hover, &:focus, &.hover
            {transshort}
            border-bottom-color borderBright
            color acttext
            padding-right 0.5em
            padding-left 1.1em
        &.checkbox
            padding 0.2em 0.5em 0.2em 1.5em
            input[type="checkbox"], input[type="radio"]
                top 0.65rem
            &:hover, &.hover
                padding-right 0.5em
                padding-left 1.5em
        & > svg:first-child, & > .aSpacer:first-child, & > img.icon:first-child
            color act
            margin-right 0.5rem
            {trans}
        & > .aSpacer:first-child
            width 1.5rem
            height 1.5rem
            display inline-block
        &:active, &.active
            background act
            border-bottom-color transparent
            color background
            & > svg:first-child, & > .aSpacer:first-child, & > .anActionableIcon
                color background

// панели управления
.aNav
    background background
    border-radius br
    border-top 1px solid borderBright
    border-left 1px solid borderBright
    &.vertical
        border 1px solid borderBright
        &.nbr
            border-top-right-radius 0
            border-bottom-right-radius 0
        &.nbl
            border-top-left-radius 0
            border-bottom-left-radius 0
    padding 0
    margin 0
    display flex
    flex-direction row
    &.vertical
        display block
    li
        text-align center
        cursor pointer
        border-right 1px solid borderPale
        border-bottom 1px solid borderBright
        flex auto
        list-style none
        padding 0.25rem 1rem
        margin 0
        {trans}
        box-shadow 0 0 background inset
        &:hover, &.active
            {transshort}
            color acttext
            & > svg
                {transshort}
                color accent1
            box-shadow 0 -2px accent1 inset
        &:active
            background acttext
            color background
            box-shadow 0 -2px acttext inset
            & > svg
                color background
        &:first-child
            border-top-left-radius inherit
            border-bottom-left-radius 0
        &:last-child
            border-top-right-radius inherit
            border-bottom-right-radius 0
            // The last item visually forms the right border of the container
            border-right-color borderBright
    &.vertical li
        text-align initial
        border-right 0
        border-bottom 1px solid borderPale
        padding 0.35rem 1rem
        overflow hidden
        text-overflow ellipsis
        white-space nowrap
        &:hover, &.active
            box-shadow -2px 0 accent1 inset
        &:active
            box-shadow -2px 0 acttext inset
        &:last-child
            border-bottom 0


// resource cards
.Cards
    list-style none
    padding 0
    display grid
    grid-template-columns repeat(auto-fill, minmax(17em, 1fr))
    grid-gap 0.3em
    flex-grow 0
    &.list
        display block
    &.list .aCard
        display flex
        flex-flow row nowrap
        margin 0
        padding 0.5rem 1rem
        border-radius 0
        width auto
        &:hover
            background act
            color background
        .aCard-Properties
            flex 1 1 auto
            order 4
            line-height 1.5rem
            text-align left
            display flex
            flex-flow row nowrap
        .asset-browser-Icons
            flex 0 0 auto
        .date
            display block
            flex 0 0 auto
            width 6rem
            font-size 80%
            text-align center
            font-family fonts
            order 10
        & + .aCard
            border-top 0
        .aCard-aThumbnail
            width 1.5rem
            img, svg
                height 1.5rem
                width 1.5rem
                margin 0
                flex 0 0 auto
                order 2
            img
                height 2rem
                width 2rem
                margin -0.25rem
        &:first-child
            border-top-left-radius br
            border-top-right-radius br
        &:last-child
            border-bottom-left-radius br
            border-bottom-right-radius br
    &.largeicons
        grid-template-columns repeat(auto-fill, minmax(15em, 1fr))
        li
            text-align center
            position relative
            flex-flow column nowrap
        .aCard-aThumbnail
            max-width 100%
            width unset
            margin-right 0
            svg
                width 6rem
                height 6rem
                stroke-width 0.5
            img
                width unset
                height unset
                max-width 100%
                max-height 10rem
                margin 0
        .aCard-Properties
            flex 0 0 auto
            margin 0.5rem 0
            line-height 1.5
        span
            font-family font-mono
            width 12.5em
            text-overflow ellipsis
            white-space nowrap
            overflow hidden
.aCard
    background background
    padding 0.5rem 1rem
    gap 0.5rem 1rem
    &.compact
        padding 0.4em 0.8em
    margin 0
    box-sizing border-box
    border 1px solid borderPale
    border-radius br
    vertical-align top
    cursor pointer
    transition 0.35s ease all
    display flex
    flex-flow row nowrap
    align-items center
    justify-content center
    line-height 1
    &:hover, &.active
        border-color acttext
        .Cards.list &
            position relative
            border-top 1px solid acttext
            margin-top -1px
    &:active
        border-color accent1
        background act
        color background
.aCard-Properties
    flex 1 1 auto
    overflow hidden
    > .date
        display none
    & > span
        font-family font-mono
        width 100%
        display inline-block
        vertical-align middle
        text-overflow ellipsis
        white-space nowrap
        overflow hidden
        line-height 1.5em
        &.secondary
            svg
                width 1rem
                height @width
                vertical-align -3px
                &.feather
                    stroke-width 1px
            font-family fonts
            @extends .small, .dim
.aCard-aThumbnail
    width 3rem
    flex 0 0 auto
    margin-right 1rem
    line-height 0
    svg
        width 3rem
        height 3rem
        stroke-width 1
        color act
        padding 0.5rem
    // Images cheat a bit with negative margins
    // to occupy a 4rem x 4rem box
    img
        width 4rem
        height 4rem
        max-width 4rem
        object-fit contain
        border-radius br
        pointer-events none
    .aCard-aFolderIcon
        width 3rem
        height 3rem
        position relative
        svg
            position absolute
            left 50%
            top 50%
            transform translate(-50%, -50%)
        svg:nth-child(2)
            width 40% !important
            height 40% !important
            top 55%
            stroke-width 1.5
    &:hover img
        background rgba(act, 0.35)
    .Cards.largeicons &
        .aCard-aFolderIcon, .aCard-aFolderIcon svg
            width 4rem
            height 4rem
    .aCard.compact &, .Cards.list &
        width 1.5rem
        svg
            width 1.5rem
            height 1.5rem
            stroke-width 2
        .aCard-aFolderIcon
            width 1.5rem
            height 1.5rem
        img
            width 2rem
            height 2rem
            margin -0.25rem 0 -0.25rem -0.25rem
.aCard-Actions
    position absolute
    top 0.5rem
    right 0.5rem
    opacity 0
    {trans}
    .aCard:hover &, .aCard:focus &
        opacity 1
sounds-panel, rooms-panel
    .Cards li img:hover
        background none

.anErrorNotice
    background mix(error, background, 10%)
    border 1px solid error
    border-radius br
    padding 0.5rem 1rem
    line-height 1.5
    position absolute
    margin-top 0.5rem
    color error
    z-index 100
    transform-origin 50% -0.5rem
    &::before
        background mix(error, background, 10%)
        content ''
        left 50%
        top -0.33rem
        position absolute
        width 0.5rem
        height 0.5rem
        border-left 1px solid error
        border-top 1px solid error
        transform translate(-0.25rem, 0) rotate(45deg)

.aNiceTable, .aPaddedTable
    border-spacing 0
    td, th
        padding 0.5rem 0.75rem
        margin 0
        vertical-align top
        &:first-child
            padding-left 0
        &:last-child
            padding-right 0
    &.dense
        td, th
            padding 0.35rem 0.25rem
        &:first-child
            padding-left 0
        &:last-child
            padding-right 0
    th
        border-bottom 1px solid borderBright
        text-align left
    &.cellsmiddle
        td, th
            vertical-align middle
.aNiceTable
    margin 1rem 0
    border 1px solid borderBright
    border-radius br
    {shadamb}
    position relative
    background background
    td, th
        &:first-child
            padding-left 1.5rem
        &:last-child
            padding-right 1.5rem
    th
        position sticky
        z-index 2
        background background
        top 0
.aTableWrap
    max-height calc(100vh - 5rem)
    overflow auto
    .aNiceTable
        width max-content

.aProgressbar
    min-width 10rem
    max-width 100%
    position relative
    border-radius br
    border 1px solid borderBright
    height 0.5rem
    vertical-align middle
    display inline-block
    div
        border-radius br
        background act
        position absolute
        top 0
        left 0
        bottom 0
        width 50%
        {trans}
    &.warning div
        background warning
    &.success div
        background success
    &.error div
        background error

.anIllustration
    color act

@keyframes pulse
    0%
        transform translate(-50%, -50%) scale(0)
        opacity 0
    25%
        transform translate(-50%, -50%) scale(1)
        opacity 1
    50%, 100%
        transform translate(-50%, -50%) scale(2)
        opacity 0

.aPulser
    position absolute
    left 50%
    top 50%
    user-select none
    pointer-events none
    &::before, &::after
        content ''
        display block
        width 2.5rem
        height 2.5rem
        position absolute
        left 50%
        top 50%
        transform translate(-50%, -50%)
        border-radius 100%
        border 3px solid accent1
        z-index 100
        animation pulse 2s infinite linear
    &::after
        animation-delay -0.2s
        width 3rem
        height 3rem
